<template>
    <div class="LetterInquiry">
        <TitleBox class="form-tj" :icon="require('@STmailboxesWeb/assets/imgs/icon_tj.png')" title="信件查询">
            <template v-slot:content="{}">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item label="" prop="code">
                        <el-input v-model="ruleForm.code" placeholder="请输入信件编码"></el-input>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入信件姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </TitleBox>
    </div>
</template>
  
<script>
import TitleBox from "@STmailboxesWeb/components/titleBox";
export default {
    components: {
        TitleBox,
    },
    name: 'LetterInquiry',
    props: {
        // title: {
        //     type: String,
        //     default: "",
        // },
        // listData: {
        //     type: Array,
        //     default() {
        //         return [];
        //     },
        // },
    },

    data() {
        return {
            ruleForm: {
                code: "",
                name: "",
            },
            rules: {
                code: [{ trigger: "blur" }],
                name: [{ trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm() {
            this.$router.push({
                path: '/infoReply',
            })
        },
        resetForm() {
            this.ruleForm = {
                code: "",
                name: "",
            }
        }


    }
};
</script>
<style lang='scss' scoped>
.form-tj {
    background: #e2efff;
    border: 1px solid #d6ddeb;
}

::v-deep {
    .el-form-item__content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >button {
            width: 50%;
            margin: 0px;
            border-radius: 2px 0px 0px 2px;
        }

        >button:first-child {
            background: linear-gradient(179deg, #3a8edc 0%, #2a6aa5 100%);
        }

        >button:last-child {
            color: #1655ab;
            border-radius: 0px 2px 2px 0px;
            border: 1px solid #a9bbd2;
        }
    }

    // .button .el-button {
    //     width: 100px;
    //     height: 34px;
    //     background: linear-gradient(179deg, #3A8EDC 0%, #2A6AA5 100%);
    //     border-radius: 2px;
    //     font-size: 14px;
    //     font-weight: 400;
    //     color: #FFFFFF;
    //     line-height: 34px;
    //     padding: 0px;
    // }
}
</style>
  
